<template>
  <com-paging :load-page="{ showLoading: true, load, onFail: console.log }">
    <view class="container">
      <view class="link">
        <com-button @click="config.connectWallet" type="success">
          <com-font :text="fv.linkBtnText"></com-font>
        </com-button>
        <com-button @click="toPage(routerName.exchange)" type="primary">
          <com-font :text="t('home.toExchange')"></com-font>
        </com-button>
      </view>
      <view class="contract-content" v-if="fv.isLink">
        <view class="btns">
          <com-button :disabled="config.callValue.initializedStarterFacility?.value"
            :loading="config.callValue.purchaseInitialFacility?.loading.value"
            @click="config.call.purchaseInitialFacility()">
            <com-font :text="t('home.purchaseLand')"></com-font>
          </com-button>
        </view>
        <view class="output">
          <view class="text">{{ t('home.currentOutput') }}：</view>
          <view class="n">{{ config.callValue.pendingRewards?.value }}</view>
          <com-button type="warning" @click="config.call.pendingRewards()"
            :loading="config.callValue.pendingRewards?.loading.value">
            <com-font :text="t('home.refresh')"></com-font>
          </com-button>
          <com-button type="success" @click="config.call.claimRewards()"
            :loading="config.callValue.claimRewards?.loading.value">
            <com-font :text="t('home.receive')"></com-font>
          </com-button>
        </view>
        <view class="lands">
          <view class="row" v-for="row in config.state.landPosition">
            <view :class="['column', item.isActive && 'is-active']" v-for="item in row">
              <view class="c" @click="!item.miner && item.handle(item)">
                <image class="image" v-if="item.miner" mode="widthFix"
                  :src="localFile.getImage('home/miner')"></image>
                <template v-else>
                  <view class="p">{{ `x${item.x}, y${item.y}` }}</view>
                  <view class="text">
                    {{ item.text + t('home.miner') }}
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
        <view class="miner">
          <view class="title">{{ t('home.platformMinerList') }}</view>
          <view class="header">
            <view class="item" v-for="item in config.Config.minerTableHeader">
              {{ t(`home.minerTableHeader.${item}`) }}
            </view>
            <view class="item">{{ t('home.minerTableHeader.handle') }}</view>
          </view>
          <view class="list" v-for="list in config.callValue.miners?.value">
            <view class="item" v-for="item in getMinerList(list)">
              {{ item }}
            </view>
            <view class="item">
              <com-button v-if="list.inProduction" class="is-link" 
                :loading="config.callValue.buyMiner?.loading.value"
                @click="config.call.buyMiner({ minerIndex: list.minerIndex })">
                <com-font :text="t('home.purchase')"></com-font>
              </com-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </com-paging>
</template>

<script setup lang="ts">
import { t } from '@/locale'
import { computed } from 'vue'
import * as config from '.'
import type { Miner } from './type'
import { ethers } from 'ethers'
import localFile from '@/utils/local-file'
import { toPage } from '@/utils'
import routerName from '@/utils/router-name'
import Decimal from 'decimal.js'

const getMinerList = (list: Miner) => {
  return config.Config.minerTableHeader.map(item => {
    try {
      if (list[item] instanceof ethers.BigNumber) {
        return list[item].toNumber()
      }
      return list[item]
    } catch (error) {
      const v = list[item] as ethers.BigNumber
      const value = new Decimal(v.toString()).div(10 ** config.Config.unit).toNumber()
      return list.inProduction ? value : '—'
    }
  })
}
const fv = computed(() => {
  const linkAccount = config.state.account
  const isLink = Boolean(linkAccount)
  const linkBtnText = isLink
    ? linkAccount?.replace(/^(.{4}).+(.{4})$/, '$1....$2')
    : t('home.connectWallet')

  return {
    isLink,
    linkBtnText,
  }
})

function load() {
  return Promise.all([
    config.connectNetWork(),
    config.init(),
  ])
}
</script>

<style scoped src="./index.scss"></style>